<template>
	<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx"  @change="swiperChange">
		<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in list" :key="item[urlKey]">
			<view class="swiper_content">
				<image
					:class="currentIndex == index ? 'item-img' : 'item-img-side'"
					:src="item.src"
					:style="dontFirstAnimation ? 'animation: none;' : ''"
					mode="aspectFill"
				></image>
				<view class="line">摄影</view>
				<view class="text_content">
					<view class="text_left">{{item.text}}</view>
					<view class="text_right">
						<view class="text_id">VOL.{{item.id}}</view>
						<view class="text_day">{{item.day}}</view>
						<view class="text_date">{{item.year}}/{{item.month}}</view>
					</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>
<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		urlKey: {
			type: String,
			default() {
				return '';
			}
		}
	},
	data() {
		return {
			currentIndex: 0,
			dontFirstAnimation: true
		};
	},
	methods: {
		swiperChange(e) {
			this.dontFirstAnimation = false;
			this.currentIndex = e.detail.current;
		}
	}
};
</script>
<style scoped lang="scss">
.image-container {
	width: 750rpx;
	height: 800rpx;
	.line {
		width: 100%;
		background-color: #333;
		color: #fff;
		padding: 3px 0;
		text-align: center;
	}
	.text_content {
		width: 100%;
		display: flex;
		border-radius: 0 0 14rpx 14rpx;
		overflow: hidden;
		.text_left {
			display: flex;
			align-items: center;
			background-color: #d6d6d6;
			padding: 12rpx;
		}
		.text_right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #f2f2f2;
			color: #333;
			float: right;
			padding: 12.5px;
			text-align: center;
			.text_day {
				font-size: 48px;
				height: 48px;
				line-height: 48px;
			}
		}
	}
}
.item-img {
	width: 100%;
	border-radius: 14rpx 14rpx 0 0;
	margin-bottom: -6rpx;
}
.swiper-item {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.swiper_content {
		animation: to-big 0.3s;
	}
}
.item-img-side {
	width: 100%;
	margin-bottom: -6rpx;
	border-radius: 14rpx 14rpx 0 0;
}
.swiper-item-side {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.swiper_content {
		transform: scale(0.95);
		animation: to-mini 0.3s;
	}
}
@keyframes to-mini {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0.95);
	}
}
@keyframes to-big {
	from {
		transform: scale(0.95);
	}

	to {
		transform: scale(1);
	}
}
</style>
